<template>
  <view class="bill-list">
    <view class="bill-list-head flex justify-between items-center">
      <view
        class="bill-list-head-time flex items-center"
        @click="showTime = true"
      >
        <view style="margin-right: 10rpx">{{
          $u.timeFormat(value, "mm月")
        }}</view>
        <u-icon name="arrow-down-fill" size="12"></u-icon>
      </view>
      <view class="bill-list-head-price" style="font-size: 26rpx">
        收入: ¥
        <text style="font-size: 32rpx">{{ totalIncome }}</text>
      </view>
    </view>

    <!-- 列表 -->
    <load-list :localData="billData">
      <template v-slot="{ list }">
        <view
          class="bill-list-item flex justify-between items-center"
          v-for="item of list"
          @click="
            $jump('/subPages/user/technician/bill/bill-detail', {
              query: {
                orderId: item._id,
              },
            })
          "
          :key="item._id"
        >
          <view
            class="item-avatar"
            style="padding-bottom: 80rpx"
            v-if="item.data"
          >
            <u-avatar size="80rpx" :src="$photo(item.data.project_log)" />
          </view>
          <view class="item-info">
            <view class="chuck flex items-center justify-between">
              <view style="color: #333; font-size: 32rpx">{{
                item.data.title
              }}</view>
              <view style="color: #f60000; font-size: 28rpx">
                ¥ {{ Number(item.data.price) + item.distance * 10 }}
              </view>
            </view>
            <view class="chuck flex items-center justify-between">
              <view>打车费：¥ {{ item.distance * 10 }}</view>
              <view>项目费：¥ {{ item.data.price }}</view>
            </view>
            <view class="chuck">
              {{ $u.timeFormat(item.creatorTime, "yyyy-mm-dd hh:MM:ss") }}
            </view>
          </view>
        </view>
      </template>
    </load-list>

    <!-- 时间选择器 -->
    <u-datetime-picker
      :show="showTime"
      v-model="value"
      mode="year-month"
      closeOnClickOverlay
      @confirm="confirm"
      @cancel="cancel"
      @close="close"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { getModelList, getModelInfo } from "@/api";
import { getSearchFilter } from "@/common/function";
import { mapState } from "vuex";
export default {
  data() {
    return {
      billData: [],
      showTime: false,
      value: Date.now(),
      orderId: "",
    };
  },
  computed: {
    ...mapState("address", ["currentAddress"]),
    // 得到默认地址经纬度
    location() {
      let arr = this.currentAddress?.location?.split(",");
      return {
        lat: arr?.[1] || 0,
        lng: arr?.[0] || 0,
      };
    },
    timeRange() {
      return this.$helper.getCurrentMonthRange(this.value).map((item) => {
        return new Date(item).getTime();
      });
    },
    // 总收入
    totalIncome() {
      return this.billData.reduce((prev, next) => {
        return prev + Number(next.data.price) + next.distance * 10;
      }, 0);
    },
  },
  methods: {
    // 时间选择器
    async confirm(e) {
      this.value = e.value;
      await this.getListData(this.orderId);
      this.showTime = false;
    },
    cancel() {
      this.showTime = false;
    },
    close() {
      this.showTime = false;
    },
    // 获取订单数据
    async getListData(baseInfo_id) {
      let rangeTime = this.timeRange;
      let filterData = {
        currentPage: 1,
        pageSize: -1,
        connect: "and",
        filter: [
          getSearchFilter({ baseInfo_id }, { method: "eq" }),
          getSearchFilter({ status_code: 4 }, { method: "gte" }),
          getSearchFilter({ creatorTime: rangeTime }, { method: "range" }),
        ].flat(2),
      };
      const { data } = await getModelList(
        "66002f4f5efd5153ff566ec3",
        filterData
      );

      for (const item of data?.list) {
        let { data } = await getModelInfo(
          "65b1d17c0921260197c48a76",
          item.current_project_Info
        );
        // console.log(projectData);
        this.billData.push({
          ...item,
          data,
        });
      }

      console.log(this.billData);
      // this.billData = data?.list;
    },
    // 获取每个订单项目数据
    async getBillProjectData(_id) {
      const { data } = await getModelList("65b1d17c0921260197c48a76", {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ _id }),
      });
      this.billData = data?.list;
    },
  },
  async onLoad(options) {
    // 获取数据
    this.orderId = options.id;
    await this.getListData(this.orderId);
  },
};
</script>

<style lang="scss" scoped>
.bill-list {
  padding: 30rpx;
  box-sizing: border-box;

  &-head {
    font-size: 26rpx;
    margin-bottom: 30rpx;
  }

  .bill-list-item {
    box-shadow: 0rpx 6rpx 18rpx 1rpx rgba(209, 209, 209, 0.4);
    border-radius: 15rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;

    .item-avatar {
      flex-shrink: 0;
    }

    .item-info {
      flex: 1;
      margin-left: 20rpx;

      .chuck {
        margin-bottom: 10rpx;
        color: #999;
      }
    }
  }
}
</style>
